<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1349518_m51epnu0dj.css">
</head>
<body>

    <div class="main-frame containner">
        <div class="main-left-frame">
            <div class="main-left-top">
                <img src="images/logo.png" alt="">
            </div>
            <div class="main-left-name">
                <span><i class="iconfont" style="font-size: 22px ;line-height:25px">&#xe634;</i>&nbsp;&nbsp;黑侠（光谷店）</span>
                <span><i class="iconfont" style="font-size: 20px ;line-height:25px">&#xe627;</i>&nbsp;&nbsp;2016-04-06&nbsp;&nbsp;10:23&nbsp;&nbsp;AM</span>
            </div>
            <div class="main-left-shouzhi">
                <img src="images/shouzhi.png" alt="" style="height: 21px;">
                <span style="color:#D4D3D3;margin-left:5px;font-size: 15px;">收支明细</span>
            </div>
            <div class="main-left-content-frame">
                <div class="main-left-content-cargo-frame">
                    <div class="main-left-content-cargo" style="font-weight: 900">
                        <div class="main-left-content-cargo-other"></div>
                        <div class="main-left-content-cargo-name">品名</div>
                        <div class="main-left-content-cargo-num">数量</div>
                        <div class="main-left-content-cargo-much">金额</div>
                        <div class="main-left-content-cargo-money">结算价</div>
                    </div>
                    <div class="main-left-content-cargo" >
                        <div class="main-left-content-cargo-other"></div>
                        <div class="main-left-content-cargo-name">蛋挞</div>
                        <div class="main-left-content-cargo-num">5</div>
                        <div class="main-left-content-cargo-much">60</div>
                        <div class="main-left-content-cargo-money">60</div>
                    </div>
                    <div class="main-left-content-cargo" >
                        <div class="main-left-content-cargo-other"></div>
                        <div class="main-left-content-cargo-name">全麦面包</div>
                        <div class="main-left-content-cargo-num">1</div>
                        <div class="main-left-content-cargo-much">10.5</div>
                        <div class="main-left-content-cargo-money">10.5</div>
                    </div>
                    <div class="main-left-content-cargo" >
                        <div class="main-left-content-cargo-other"><img src="images/曾.png" alt=""></div>
                        <div class="main-left-content-cargo-name">戚风蛋糕</div>
                        <div class="main-left-content-cargo-num">1</div>
                        <div class="main-left-content-cargo-much">20</div>
                        <div class="main-left-content-cargo-money">0</div>
                    </div>
                    <div class="main-left-content-cargo" style="border-bottom:none;box-shadow:0px 3px 5px 0px rgb(104, 103, 103)">
                        <div class="main-left-content-cargo-other"></div>
                        <div class="main-left-content-cargo-name">三明治</div>
                        <div class="main-left-content-cargo-num">5</div>
                        <div class="main-left-content-cargo-much">60</div>
                        <div class="main-left-content-cargo-money">60</div>
                    </div>
                </div>
                <div class="main-left-content-total-frame">
                    <div class="main-left-content-total">
                        <span style="font-weight: 900;">总额：</span>
                        <span style="position:absolute;right:15px">￥125.5</span>
                    </div>
                    <div class="main-left-content-total-search">
                        <input type="text" placeholder="搜索商品">
                        <img src="images/Layer-6.png" alt="" class="left-search-img">
                    </div>
                    <button class="left-search-btn "><i class="iconfont"> &#xe652;</i></button>
                </div>
                <div class="main-left-content-tool-frame">
                    <div class="main-left-content-tool" style="background: none;">
                        <img src="images/关闭.png" alt="" >
                    </div>
                    <div class="main-left-content-tool">
                        <i class="iconfont ">&#xe602;</i>
                    </div>
                    <div class="main-left-content-tool">
                        <i class="iconfont ">&#xe643;</i>
                    </div>
                    <div class="main-left-content-tool">
                         <i class="iconfont ">&#xe6e3;</i>
                    </div>
                    <div class="main-left-content-tool">
                        <img src="images/修改.png" alt="" style="background: #333;" >
                    </div>
                    <div class="main-left-content-tool">
                        <img src="images/挂.png" alt="" style="background: #333;">
                    </div>
                    <div class="main-left-content-tool " >
                        <img src="images/保险箱.png" alt=""style="background: #333;" >
                    </div>
                   
                </div>
            </div>
        </div>
        <div class="main-right-frame">
            <div class="main-right-top-frame">    </div>
            <div class="main-right-nav-frame">
                <div class="main-right-nav">
                    戚风蛋糕
                </div>
                <div class="main-right-nav">
                    蛋挞
                </div>
                <div class="main-right-nav">
                    全麦面包
                </div>
                <div class="main-right-nav">
                    戚风蛋糕
                </div>
                <div class="main-right-nav">
                    三明治
                </div>
                <div class="main-right-nav" style="width:50px;vertical-align: bottom;">
                    <i class="iconfont">&#xe601;</i>
                </div>
            </div>
            <div class="main-right-content-frame row">
                <div class="main-right-content-pageimg">        </div>
                <hr class="line">
                <div class="main-right-content-cargo-frame">
                    <div class="main-right-content-cargo tjbg">
                        <p>0001</p>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div class="main-right-content-cargo ">
                        <p>0001</p>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div class="main-right-content-cargo ">
                        <p>0001</p>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div class="main-right-content-cargo ">
                        <p>0001</p>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div class="main-right-content-cargo " style="margin-right:0;">
                        <p>0001</p>
                        <p>巧克力蛋糕</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-footer-frame">
            <div class="footer-hy">
                会员信息
            </div>
            <div class="footer-tool-frame">
                <div class="footer-tool">
                    <img src="images/组-15.png" alt="">
                    <span>管理台</span>
                </div>
                <div class="footer-tool">
                    <img src="images/购物卡.png" alt="">
                    <span>购物卡</span>
                </div>
                <div class="footer-tool">
                    <img src="images/会员.png" alt="">
                    <span>会员</span>
                </div>
                <div class="footer-tool">
                    <img src="images/减少.png" alt="">
                    <span>促销</span>
                </div>
                <div class="footer-tool">
                    <img src="images/组-15.png" alt="">
                    <span>预定</span>
                </div>
                <div class="footer-tool">
                    <img src="images/交班22.png" alt="">
                    <span>交班</span>
                </div>
                <div class="footer-tool">
                    <img src="images/挂单.png" alt="">
                    <span>挂单</span>
                </div>
                
            </div>
            <div class="footer-cashier-frame">
                <div class="cashier">
                        <img src="images/收银中心.png" alt=""  class="center">
                        <span class="sy" >收银</span>
                </div>
                
            </div>
        </div>
    </div>
</body>
</html>